<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>AiRent租房欢迎您</title>
  <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
  <link rel="stylesheet" th:href="@{/airent/css/index.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}" />
  <link rel="icon" th:href="@{/airent/common/imgs/icon.ico}" type="images/x-ico" />
  <style type="text/css">
    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }

    #container {
        width: 100%;
        height: 450px;
        border: #ccc solid 1px;
    }
</style>
<script type="text/javascript"
    src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
</head>

<body>
<!--引入导航栏-->
<div th:replace="~{head/topbar::topBar}"></div>
  <!-- 轮播图 -->
  <div id="carouselExampleCaptions" class="carousel slide animate__animated animate__fadeIn" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img th:src="@{/airent/imgs/banner01.jpg}" class="d-block w-100" alt="图片加载失败">
        <div class="carousel-caption d-none d-md-block">
          <h5>标题1</h5>
          <p>内容1</p>
        </div>
      </div>
      <div class="carousel-item">
        <img th:src="@{/airent/imgs/banner01.jpg}" class="d-block w-100" alt="图片加载失败">
        <div class="carousel-caption d-none d-md-block">
          <h5>标题2</h5>
          <p>内容2</p>
        </div>
      </div>
      <div class="carousel-item">
        <img th:src="@{/airent/imgs/banner01.jpg}" class="d-block w-100" alt="图片加载失败">
        <div class="carousel-caption d-none d-md-block">
          <h5>标题3</h5>
          <p>内容3</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <!-- 轮播添加标题 -->
  <div class="row" id="heading-box">
    <div class="animate__animated animate__flipInX">
      <b>爱生活，安住房</b>
    </div>
  </div>
  <!-- 轮播添加搜索框 -->
  <div class="row" id="search-box">
    <div>
      <div class="input-group animate__animated animate__fadeInUp">
        <input id="search-input" type="text" class="form-control" placeholder="请输入区域、商圈或地址开始找房">
        <span class="input-group-btn">
          <a href="searchhouse.html"><button id="search-button" class="btn btn-success animate__animated animate__pulse"
            type="button">开始找房</button></a>
        </span>
      </div>
    </div>
  </div>
  
  <!-- 房源推荐卡片第一列 -->
  <div id="house-recommend-first" class="container col-md-12  animate__animated animate__fadeInUp">
    <div id="recommend-title" class="offset-md-1">
      <a href="#">
        <h3><svg id="house-icon" class="bi bi-house-door-fill" width="1em" height="1em" viewBox="0 0 16 16"
            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z" />
            <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
          </svg>房源推荐</h3>
      </a>
    </div>
    <div id="recommend-slogan" class="offset-md-1">
      <span>精品好房等你来选</span>
    </div>
    <div class="row col-md-10 offset-md-1">
      <div class="col md-1">
        <div class="card animate__animated animate__fadeInUp">
          <a href="housedesc.html"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="housedesc.html">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="housedesc.html">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="housedesc.html">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
      <div class="col md-1">
        <div class="card animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
      <div class="col md-1">
        <div class="card  animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
      <div class="col md-1">
        <div class="card  animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 房源推荐第二列 -->
  <div id="house-recommend-second" class="container col-md-12  animate__animated animate__fadeInUp">
    <div id="recommend-title" class="offset-md-1">
      <a href="#">
        <h3><svg id="house-icon" class="bi bi-house-door-fill" width="1em" height="1em" viewBox="0 0 16 16"
            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z" />
            <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
          </svg>房源推荐</h3>
      </a>
    </div>
    <div id="recommend-slogan" class="offset-md-1">
      <span>精品好房等你来选</span>
    </div>
    <div class="row col-md-10 offset-md-1">
      <div class="col md-1">
        <div class="card animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
      <div class="col md-1">
        <div class="card animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
      <div class="col md-1">
        <div class="card  animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
      <div class="col md-1">
        <div class="card  animate__animated animate__fadeInUp">
          <a href="#"><img th:src="@{/airent/imgs/house.png}" class="card-img-top" alt="图片加载失败"></a>
          <div class="card-body">
            <a id="house-titile" href="#">
              <h5 class="card-title">房源标题</h5>
            </a>
            <a id="house-desc" href="#">
              <p class="card-text">111m<sup>2</sup>3室2厅1厨1卫</p>
            </a>
            <a id="house-price" href="#">
              <p class="card-text">1111元/月
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 引入底部 -->
  <div th:replace="~{food/bottombar::topBar}"></div>
  <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
  <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.js}"></script>
  <script>
    $('#login-button').on('shown.bs.modal', function () {
      $('#myInput').trigger('focus')
    })
  </script>

<script>
  window.onload = function locationcity() {
      function myFun(result) {
          var cityName = result.name;
          var outer = document.getElementById("cityname");
          outer.innerText = cityName;
      }
      var myCity = new BMap.LocalCity();
      myCity.get(myFun);
  }
</script>
</body>

</html>